                                        <!-- 商品展示组件 -->

<!-- 传入属性 -->
			<!-- shopImag：图片地址
				 shopTitlee：标题文字
				 shopItem：功能成员  数组
				 fukhaoNum：福卡数
				 shopStill：现价
				 shopOriginal：原价
				 shopindex：位置信息
				 onlyLogo：唯一标识 -->
			<!-- 点击方法 -->
			<!-- shopShowClick：使用父组件中的函数  传入本组件的    唯一标识onlyLogo   跳转地址shopTabUrl -->
<template>
  <div class="shoppingShow" @click="shoppingClick">
    <!-- 图片 -->
    <div
      class="shoppingShow-image"
      :style="{ backgroundImage: 'url(' + shopImag + ')' }"
    ></div>

    <!-- 文字描述 -->
    <div class="shoppingShow-text">
      <!-- 标题 -->
      <div class="shoppingShow-text-title">{{ shopTitlee }}</div>

      <!-- 功能展示 -->
      <!-- <div class="shoppingShow-text-msg"> -->
      <!-- 功能展示成员 -->
      <!-- <div class="shoppingShow-text-msg-item" v-for="(value,index) in shopItem" :key="index">{{value}}</div>
			</div> -->

      <!-- 价格 -->
      <div class="shoppingShow-text-price">
        <!-- 现价 -->
        {{ "￥" + shopStill }}
        <!-- 原价 -->
        <text
          ><del>￥{{ shopOriginal }}</del></text
        >
      </div>

      <!-- 选择支付按键 -->
      <!-- ------------------------------------------------------------------------ -->
      <div class="shoppingShow-btn">
        <div class="shoppingShow-btn-left">会员价</div>
        <div class="shoppingShow-btn-right">
          或<strong>{{ fukhaoNum }}</strong
          >张福卡
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 图片地址
    shopImag: {
      type: [String],
      default: "",
    },
    // 标题文字
    shopTitlee: {
      type: [String],
      default: "",
    },
    // 功能成员
    shopItem: {
      type: [Array],
      default() {
        return [""];
      },
    },
    // 现价
    shopStill: {
      type: [String, Number],
      default: "",
    },
    // 原价
    shopOriginal: {
      type: [String, Number],
      default: "",
    },
    // 福卡数
    fukhaoNum: {
      type: [String, Number],
      default: "",
    },
    // 位置信息
    shopindex: {
      type: [String, Number],
      default: "",
    },
    // 唯一标识
    onlyLogo: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    // 点击函数
    shoppingClick() {
      // 使用父组件中的函数  传入本组件的    唯一标识onlyLogo   跳转地址shopTabUrl
      this.$emit("shopShowClick", {
        shopTabUrl: this.shopTabUrl,
        onlyLogo: this.onlyLogo,
      });
    },
  },
};
</script>

<style scoped>
/* 商品展示组件 */
.shoppingShow {
  width: 167px;
  height: 243px;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 15px;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
/* 展示图片 */
.shoppingShow-image {
  width: 125px;
  height: 118px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 文字部分 */
/* ----------------------------------------------------- */
.shoppingShow-text {
  width: 140px;
  margin-top: 11px;
}
/* 标题 */
.shoppingShow-text-title {
  width: 100%;
  height: 37px;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 600;
  text-align: left;
  color: #000000;
  line-height: 18px;
  letter-spacing: 0px;
  /* 多行文本超出后呈现省略号 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 文本的行数 */
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 功能展示区 */
.shoppingShow-text-msg {
  width: 100%;
  height: 20px;
  display: flex;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #808080;
  line-height: 40px;
  margin-top: 5px;
}
/* 功能展示区成员 */
.shoppingShow-text-msg-item {
  height: 100%;
  display: inline-block;
  white-space: nowrap;
  background: #f2f2f2;
  border-radius: 10px;
  padding: 0 9px;
  margin-right: 8px;
}

/* 价格 */
.shoppingShow-text-price {
  width: 100%;
  height: 21px;
  font-size: 15px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #ff504d;
  line-height: 21px;
  margin-top: 4px;
}
.shoppingShow-text-price text {
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-decoration: line-through;
  text-align: left;
  color: #999999;
  line-height: 17px;
  position: relative;
  left: 6px;
}

/* 支付按键 */
/* ----------------------------------------------------------------- */
.shoppingShow-btn {
  width: 137px;
  height: 20px;
  margin-top: 3px;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  line-height: 20px;
  display: flex;
  background-image: url("https://oss4.komect.com/equity-home/h5/dgy_sign_hyjg@2x.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* 会员价 */
.shoppingShow-btn-left {
  width: 60px;
  height: 20px;
  color: #5d3d07;
}
/* 福卡兑换 */
.shoppingShow-btn-right {
  width: 77px;
  height: 20px;
  color: #ffde9b;
}
</style>
